<template>
  <div>
    <!-- 用户列表 -->
    <div class="tabNav tabNavs">用户列表</div>
    <el-card class="cardTits" shadow="hover">
      <div class="subject-title">
        <div class="query query-task">
          <div class="flex-box">
            <div class="query-input">
              <el-input
                placeholder="请输入微信昵称"
                v-model="name"
              ></el-input>
            </div>
            <div class="query-input">
              <el-input
                placeholder="请输入手机号"
                v-model="phone"
              ></el-input>
            </div>
            <el-button class="query-btn" @click="getList" type="primary">查询</el-button>
          </div>
        </div>
      </div>
      <el-table
        :data="tableData"
        stripe
        style="width: 100%"
        ref="multipleTable"
        empty-text="暂无结果"
      >
        <el-table-column width="20"> </el-table-column>
        <el-table-column prop="id" label="OID" width=""></el-table-column>
        <el-table-column prop="name" label="微信昵称" width=""></el-table-column>
        <el-table-column prop="phone" label="手机号" min-width="120"></el-table-column>
        <el-table-column prop="signNum" label="累计签到次数" align="center" min-width="120"></el-table-column>
        <el-table-column prop="otherSignNum" label="当前连续签到次数" align="center" min-width="120"></el-table-column>
        <el-table-column prop="money" label="总付费" align="center"></el-table-column>
        <el-table-column prop="nepeople" label="总邀新" align="center"></el-table-column>
        <el-table-column prop="friend" label="好友数" align="center"></el-table-column>
        <el-table-column prop="goodNum" label="获赞数" align="center"></el-table-column>
        <el-table-column prop="kaNum" label="卡数" align="center"></el-table-column>
        <el-table-column prop="kataoNum" label="卡套数" align="center"></el-table-column>
        <el-table-column prop="time" min-width="150" label="最后活跃时间" width=""></el-table-column>
        <el-table-column
          label="操作"
          class-name="editor"
          align="center"
        >
          <template #default="item">
            <el-button @click="toDetails([item.row.id])" type="text">查看</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        v-if="tableData.length > 0"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20]"
        :page-size="selectPage"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "ListTask",
  data() {
    return {
      name: '', // 微信昵称
      phone: '', // 手机号
      currentPage: 0, // 当前页数
      selectPage: 10, // 当前页显示条数
      tableData: [
        {
          id: 1,
          name: '一朵小红花',
          phone: '18310277878',
          signNum: '4',
          otherSignNum: '10',
          money: '300',
          nepeople: '1',
          friend: '20',
          goodNum: '100',
          kaNum: '1',
          kataoNum: '0',
          time: '2021-05-12 12:12:12'
        }
      ], // 列表显示数据
      total: 0, // 总条数
    };
  },
  components: {},
  methods: {
    handleCurrentChange(d:number) {
      // 分页切换回调
      this.currentPage = d
    },
    handleSizeChange(d:number) {
      // 分页切换每页条数回调
      this.selectPage = d
    },
    getList() {
      // 获取列表信息
      // this.$http({
      //   url: "/api/quick/business/task/selectTasks",
      //   method: "post",
      //   headers: {
      //     "Content-Type": "application/json",
      //   },
      //   data: {
      //     pageNum: this.currentPage,
      //     pageSize: this.selectPage
      //   },
      // }).then((data) => {
      //   if (data.code == 0) {
      //     this.tableData = data.result.list
      //     this.total = data.result.total
      //   }
      // });
    },
    toDetails(id:string) {
      // 跳转至详情页面
      this.$router.push({ name: 'userDetails', query: {id: id} });
    }
  },
});
</script>
<style lang="scss" scoped>
.query-task {
  justify-content: space-between;
  .flex-box {
    display: flex;
  }
  .task-add {
    margin-right: 20px;
    & :deep(span),
    & :deep(i) {
      color: #ffffff;
    }
  }
}
.add-task {
  padding-right: 50px;
  & :deep(.el-form-item) {
    .el-date-editor--date {
      .el-input__inner {
        padding: 0 30px;
      }
    }
  }
  & :deep(.el-upload--text) {
    width: auto;
    height: auto;
    border: 0;
    display: block;
    text-align: left;
  }
  & :deep(.el-button--small) {
    color: #326CF0;
    border-color: #326CF0;
  }
}

.details-task {
  .task-content {
    color: #0A2E6A;
  }
  & :deep(.el-form-item) {
    .el-form-item__label,
    .el-form-item__content {
      line-height: 22px;
    }
  }
}
.task-message {
  width: 260px;
  text-align: left;
  .el-button--primary {
    background-color: #326CF0;
    color: #ffffff;
  }
}
.query-plain {
  float: right;
  margin-top: 3px;
}
.upload-renyuanbiao {
  float: left;
}
</style>